<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魁拔论坛</title>
    <link href="css/header.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="js/main.js"></script>

    <style>
        .kb_body_con {
            min-width: 640px;
            width: 64vw;
            min-height: 30px;
            position: relative;
            margin: 10px auto;
        }
        #kb_tie_top {
            min-height: 300px;
            height: 30vw;
            background-color: whitesmoke;
        }
        #kb_tie_list {
            border-top: 3px solid whitesmoke;
            margin-bottom: 40px;
        }
        #kb_tie_list li {
            min-width: 60px;
            float: left;
            margin-right: 20px;
            text-align: center;
            border-bottom: 3px solid lightcyan;
            color: gray;
            transition: 1s;
        }
        #kb_tie_list li:hover {
            background-color: lightcyan;
        }
        

        .kb_tie_con {
            height: 40px;
            padding-top: 20px;
            color: gray;
            text-align: center;
            border-radius: 10px;
        }
        .kb_tie_con:nth-child(even) {
            background-color: whitesmoke;
        }
        .kb_tie_con > div {
            float: left;
        }
        .kb_tie_conID {
            min-width: 50px;
            width: 5vw;
            color: brown;
        }
        .kb_tie_conTitle {
            min-width: 220px;
            width: 22vw;
            height: 25px;
            top: 10px;
            font-size: 18px;
            text-align: left;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .kb_tie_conUserIcon {
            width: 40px;
            height: 40px;
            margin-left: 10px;
        }
        .kb_tie_conUserIcon > img {
            width: 100%;
            height: 100%;
            margin-top: -10px;
        }
        .kb_tie_conUserName, .kb_tie_conDate, .kb_tie_conEnd{
            min-width: 80px;
            width: 8vw;
            height: 30px;
            top: 20px;
            font-size: 14px;
            line-height: 30px;
        }
        .kb_tie_conHot{
            min-width: 50px;
            width: 5vw;
        }
    </style>
</head>
<body>
    <header id="main_header">
        <div class="kb_h_con" id="left_menu" onclick="popOut()">
            <img src="img/list.svg"/>
        </div>        
        <a href="#top_sign">
        <div class="kb_h_con" id="logo_con">
            <img id="kb_logo" src="img/logo1.png"/>
        </div></a>

        <div class="kb_h_con" id="kb_center_nav">
            <div id="kb_top_menu">
                <ul>
                    <li><a href="#">
                        <img id="kb_top_search" src="img/search.svg" onclick="popSearchBox()"/></a>
                    </li>
                    <li><a href="index.htm">首页</a></li>
                    <li><a href="playVedio.htm">放映</a></li>
                    <li><a href="new.htm">公告</a></li>
                </ul>
            </div>
        </div>

        <div id="kb_search_box">
            <img src="img/back.svg"onclick="leftSearchBox()"/>
            <input placeholder="搜索"/>
        </div>

        <div class="kb_h_con" id="h_user">
            <div id="h_user_no" style="display: none;"><span>登陆</span></div>
            <div id="h_user_yes" onclick="popUserInfo()"><img src="img/ht/ms2.jpg"/></div>
        </div>

        <div id="kb_user_info" onclick="leftUserInfo()">
            <div class="kb_user_infoCon" id="kb_infoCon_main">
                <div><img src="img/ht/ms2.jpg"/><span><img class="kb_icon" src="img/list.svg"/></div>
                <p>用户名称</span></p>
                <a href="#moreInfo">
                    <button type="button">更多设置</button>
                </a>
            </div>
            <div class="kb_user_infoCon"></div>
            <div class="kb_user_infoCon"></div>
        </div>

        <div id="menu_list" onclick="popIn()">
            <ul>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">首页</div>
                </li>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">项目</div>
                </li>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">项目</div>
                </li>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">项目</div>
                </li>                      
            </ul>

            <ul>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">项目</div>
                </li>
                <li class="menu_list_con">
                    <img class="kb_list_icon" src="img/list.svg"/>
                    <div class="kb_menu_name">项目</div>
                </li>                 
            </ul>

        </div>
    </header>
    <div id="top_sign"></div>
    
    <div class="kb_body_con" id="kb_tie_top"></div>
    <div class="kb_body_con" id="kb_tie_list">
        <ul>
            <a href="#"><li>全部</li></a>
            <a href="#"><li>原创</li></a>
            <a href="#"><li>视频</li></a>
            <a href="#"><li>音频</li></a>
        </ul>
    </div>
    <div class="kb_body_con kb_tie_con">
        <div class="kb_tie_conID">编号</div>
        <div class="kb_tie_conTitle">帖子的标题区域测试测测试测试测试测试测试测试测试</div>
        <div class="kb_tie_conUserIcon"><img src="img/ht/ms2.jpg"/></div>
        <div class="kb_tie_conUserName">用户名</div>
        <div class="kb_tie_conDate">2021/12/12</div>
        <div class="kb_tie_conHot">热度</div>
        <div class="kb_tie_conEnd">2021/12/12</div>
    </div>

    <div class="kb_body_con kb_tie_con">
        <div class="kb_tie_conID">编号</div>
        <div class="kb_tie_conTitle">帖子的标题区域</div>
        <div class="kb_tie_conUserIcon"><img src="img/ht/ms2.jpg"/></div>
        <div class="kb_tie_conUserName">用户名</div>
        <div class="kb_tie_conDate">2021/12/12</div>
        <div class="kb_tie_conHot">热度</div>
        <div class="kb_tie_conEnd">2021/12/12</div>
    </div>
    <div class="kb_body_con kb_tie_con">
        <div class="kb_tie_conID">编号</div>
        <div class="kb_tie_conTitle">帖子的标题区域</div>
        <div class="kb_tie_conUserIcon"><img src="img/ht/ms2.jpg"/></div>
        <div class="kb_tie_conUserName">用户名</div>
        <div class="kb_tie_conDate">2021/12/12</div>
        <div class="kb_tie_conHot">热度</div>
        <div class="kb_tie_conEnd">2021/12/12</div>
    </div>
    <div class="kb_body_con kb_tie_con">
        <div class="kb_tie_conID">编号</div>
        <div class="kb_tie_conTitle">帖子的标题区域</div>
        <div class="kb_tie_conUserIcon"><img src="img/ht/ms2.jpg"/></div>
        <div class="kb_tie_conUserName">用户名</div>
        <div class="kb_tie_conDate">2021/12/12</div>
        <div class="kb_tie_conHot">热度</div>
        <div class="kb_tie_conEnd">2021/12/12</div>
    </div>
    <div class="kb_body_con kb_tie_con">
        <div class="kb_tie_conID">编号</div>
        <div class="kb_tie_conTitle">帖子的标题区域</div>
        <div class="kb_tie_conUserIcon"><img src="img/ht/ms2.jpg"/></div>
        <div class="kb_tie_conUserName">用户名</div>
        <div class="kb_tie_conDate">2021/12/12</div>
        <div class="kb_tie_conHot">热度</div>
        <div class="kb_tie_conEnd">2021/12/12</div>
    </div>

    <footer>
        <p>魁拔论坛@2021</p>
        <section>         
            <ul>
                <li><span>友情链接：</span></li>
                <li><a href="#footer">链接一</a></li>
                <li><a href="#footer">链接二</a></li>
                <li><a href="#footer">链接三</a></li>
            </ul>
            <p>Powered by Discuz! X3.4</p>
        </section>
        <section>
            <p>备案信息放置区：<a href="#footer">备案号</a></p>
        </section>
    </footer>
</body>
</html>